<template>
  <view class="tab-bar">
    <!-- 左侧标签项 -->
    <view class="tab-group left-group">
      <view class="tab-item" v-for="(item, index) in leftTabs" :key="index" @click="switchTab(item.path)"
        :class="{ active: currentPath === item.path }">
        <view class="tab-item-icon">
          <image 
            :src="`/static/images/${item.icon}${currentPath === item.path ? '-active' : ''}.png`" 
            mode="widthFix" 
            :style="{ width: `${item.size}rpx` }"
          ></image>
        </view>
        <text class="tab-text" :class="{ 'active-text': currentPath === item.path }">{{ item.text }}</text>
      </view>
    </view>
    
    <!-- 中间占位 -->
    <view class="center-placeholder"></view>
    
    <!-- 右侧标签项 -->
    <view class="tab-group right-group">
      <view class="tab-item" v-for="(item, index) in rightTabs" :key="index" @click="switchTab(item.path)"
        :class="{ active: currentPath === item.path }">
        <view class="tab-item-icon">
          <image 
            :src="`/static/images/${item.icon}${currentPath === item.path ? '-active' : ''}.png`" 
            mode="widthFix" 
            :style="{ width: `${item.size}rpx` }"
          ></image>
        </view>
        <text class="tab-text" :class="{ 'active-text': currentPath === item.path }">{{ item.text }}</text>
      </view>
    </view>

    <!-- 添加按钮 -->
    <view class="add-btn" @click="onAddClick">
      <uni-icons type="plusempty" size="30" color="#333333"></uni-icons>
    </view>
  </view>
</template>

<script>
import { themeMixin } from '@/utils/theme.js';

export default {
  name: 'TabBar',
  mixins: [themeMixin],
  props: {
    // 当前激活的路径
    current: {
      type: String,
      default: '/pages/index/index'
    }
  },
  data() {
    return {
      currentPath: this.current,
      allTabs: [
        {
          icon: 'detail',
          size: 50,
          text: '明细',
          path: '/pages/index/index'
        },
        {
          icon: 'chart',
          size: 50,
          text: '图表',
          path: '/pages/chart/chart'
        },
        {
          icon: 'find',
          size: 55,
          text: '发现',
          path: '/pages/discover/discover'
        },
        {
          icon: 'person',
          size: 50,
          text: '我的',
          path: '/pages/user/user'
        }
      ]
    };
  },
  computed: {
    // 左侧标签（前两个）
    leftTabs() {
      return this.allTabs.slice(0, 2);
    },
    // 右侧标签（后两个）
    rightTabs() {
      return this.allTabs.slice(2);
    }
  },
  watch: {
    current: {
      handler(newVal) {
        if (newVal && newVal !== this.currentPath) {
          this.currentPath = newVal;
          console.log('TabBar current path changed:', newVal);
        }
      },
      immediate: true
    }
  },
  methods: {
    // 切换标签页
    switchTab(path) {
      if (!path || this.currentPath === path) return;
      
      // 先更新当前路径状态
      this.currentPath = path;
      
      // 使用 switchTab 或 reLaunch 进行跳转
      if (path === '/pages/index/index' || path === '/pages/chart/chart' || 
          path === '/pages/discover/discover' || path === '/pages/profile/profile') {
        // 对于TabBar页面，使用reLaunch避免页面栈累积
        uni.reLaunch({
          url: path,
          success: () => {
            console.log('页面跳转成功:', path);
          },
          fail: (err) => {
            console.error('页面跳转失败:', err);
          }
        });
      } else {
        // 对于非TabBar页面，使用navigateTo
        uni.navigateTo({
          url: path
        });
      }
    },
    
    // 添加按钮点击事件
    onAddClick() {
      this.$emit('add');
    }
  }
}
</script>

<style lang="scss">

.tab-bar {
  box-sizing: border-box;
  height: 100rpx;
  background-color: #fff;
  border-top: 1px solid $border-color;
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom); /* 兼容iPhone X等机型 */
  padding-top: 10rpx;
  z-index: 2;
  
  // 标签组（左右两组）
  .tab-group {
    display: flex;
    flex: 1;
    justify-content: space-around;
  }
  
  // 中间占位
  .center-placeholder {
    width: 160rpx; // 与添加按钮宽度一致
  }

  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rpx 0;
    width: 50%; // 每组中的标签占50%宽度

    .tab-item-icon {
      width: 50rpx;
      height: 50rpx;
      transition: all 0.2s;
    }

    .tab-text {
      font-size: 18rpx;
      // margin-top: 8rpx;
      color: $text-color-lighter;
      transition: all 0.2s;
      
      &.active-text {
        color: $primary-color;
        font-weight: bold;
      }
    }
    
    &.active {
      .tab-text {
        color: $primary-color;
      }
    }
  }
  
  .add-btn {
    box-sizing: border-box;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: $primary-color;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
    z-index: 10;
    
    .add-icon {
      font-size: 60rpx;
      font-weight: bold;
      color: $text-color;
    }
  }
}
</style>